<template>
  <view>
    <view class="card tn-padding-sm tn-margin-sm">
      <tn-form :model="form2" ref="form2" :labelWidth="220" :errorType="['message', 'toast']">
        <view class="tn-text-center tn-padding-sm font-weight-bold">人工装卸</view>
        <tn-form-item label="数量：" prop="hwzxRgzxCount">
          <tn-input type="number" v-model="form2.hwzxRgzxCount"/>
          <text class="tn-color-gray">人</text>
        </tn-form-item>
        <tn-form-item label="收费标准：" prop="hwzxRgzxChargingStandard">
          <tn-input v-model="form2.hwzxRgzxChargingStandard"/>
          <text class="tn-color-gray">元/人工日</text>
        </tn-form-item>
        <tn-form-item label="上浮20%：" prop="hwzxRgzxIsUp">
          <tn-radio-group v-model="form2.hwzxRgzxIsUp">
            <tn-radio v-for="(item, index) in isUpLst" :key="index" :name="item.name">
              {{ item.name }}
            </tn-radio>
          </tn-radio-group>
        </tn-form-item>
        <tn-form-item label="小计：" prop="hwzxRgzxSubtotal">
          <tn-input type="number" v-model="form2.hwzxRgzxSubtotal"/>
        </tn-form-item>
      </tn-form>
    </view>

    <view v-for="(item, index) of formatList" :key="index">
      <view class="card tn-padding-sm tn-margin-sm">
        <view class="tn-text-center tn-padding-sm font-weight-bold">铲车、叉车等机械装卸</view>
        <view @click="edit(item,index)">
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">吨数:</text>
            <text class="value tn-text-lg">{{ item.hwzxJxzxCount }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">收费标准:</text>
            <text class="value  tn-text-lg">{{ item.hwzxJxzxChargingStandard }}
              <text class="tn-color-gray">元/车次</text>
            </text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">上浮20%:</text>
            <text class="value  tn-text-lg">{{ item.hwzxJxzxIsUp }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">小计:</text>
            <text class="value  tn-text-lg">{{ item.hwzxJxzxSubtotal }}</text>
          </view>
        </view>
        <view class="tn-flex tn-flex-direction-row-reverse tn-margin-top-sm">
          <tn-button style="margin-left: 10px;" @click="dcDelete(index)" backgroundColor="tn-bg-red"
                     fontColor="tn-color-white">删除
          </tn-button>
        </view>
      </view>
    </view>


    <view class="tn-flex tn-flex-row-center tn-text-bold tn-text-lg label">
      <text class="tn-form-item">小计:</text>
      <text class="tn-form-item"> {{ listTotal }}</text>
    </view>

    <view class="tn-flex tn-flex-row-center tn-padding-xl" v-if="formatList.length<2">
      <tn-button @click="add" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">添加机械装卸
      </tn-button>
    </view>


    <tn-popup v-model="popShow" mode="bottom">
      <view class="card tn-padding-sm tn-margin-sm">
        <tn-form :model="form" ref="form" :labelWidth="220" :errorType="['message', 'toast']">
          <view class="tn-text-center tn-padding-sm font-weight-bold">铲车、叉车等机械装卸</view>
          <tn-form-item label="数量：" prop="hwzxJxzxCount">
            <tn-input v-model="form.hwzxJxzxCount" type="number"/>
            <text class="tn-color-gray">吨</text>
          </tn-form-item>
          <tn-form-item label="收费标准：" prop="hwzxJxzxChargingStandard">
            <tn-input v-model="form.hwzxJxzxChargingStandard"/>
            <text class="tn-color-gray">元/车次</text>
          </tn-form-item>
          <tn-form-item label="上浮20%：" prop="hwzxJxzxIsUp">
            <tn-radio-group v-model="form.hwzxJxzxIsUp">
              <tn-radio v-for="(item, index) in isUpLst" :key="index" :name="item.name">
                {{ item.name }}
              </tn-radio>
            </tn-radio-group>
          </tn-form-item>
          <tn-form-item label="小计：" prop="hwzxJxzxSubtotal">
            <tn-input type="number" v-model="form.hwzxJxzxSubtotal"/>
          </tn-form-item>
        </tn-form>
      </view>

      <view class="tn-flex tn-flex-row-center tn-padding-xl">
        <tn-button @click="save" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
        </tn-button>
      </view>

    </tn-popup>
  </view>

</template>
<script>
import {calc} from "a-calc/es";
import {isUpLst} from "@/static/mock/diaoche";
import {toast} from "@/utils/common";

export default {
  name: "huowuzhuangxieCom",
  watch: {

    // 货物装卸费-机械 - 数量
    'form.hwzxJxzxCount'(val) {
      if (val) {
        !this.form.hwzxJxzxIsUp && (this.form.hwzxJxzxIsUp = '否')
        if (val < 5) {
          this.form.hwzxJxzxChargingStandard = 500;
        } else if (val <= 10) {
          this.form.hwzxJxzxChargingStandard = 1000;
        } else if (val > 10) {
          this.form.hwzxJxzxChargingStandard = 1500;
        }
      }
      this.getHuoWuZhuangXieFei()
    },
    // 货物装卸费-机械 - 上浮
    'form.hwzxJxzxIsUp'() {
      this.getHuoWuZhuangXieFei()
    },
// 货物装卸费-机械 - 收费标准
    'form.hwzxJxzxChargingStandard'() {
      this.getHuoWuZhuangXieFei()
    },

    // 货物装卸费 人工装卸 - 数量
    'form2.hwzxRgzxCount'(val) {
      if (val) {
        this.form2.hwzxRgzxIsUp = '否'
        this.form2.hwzxRgzxChargingStandard = 300;
      }
      this.getHuoWuZhuangXieFei2()
    },
    // 货物装卸费 人工装卸 - 上浮
    'form2.hwzxRgzxIsUp'() {
      this.getHuoWuZhuangXieFei2()
    },
    // 货物装卸费 人工装卸 - 收费标准
    'form2.hwzxRgzxChargingStandard'() {
      this.getHuoWuZhuangXieFei2()
    },
    "formatList": {
      handler(val) {
        let total = 0;
        val.forEach(item => {
          total += +item.hwzxJxzxSubtotal
        })
        this.listTotal = total + (+this.form2.hwzxRgzxSubtotal)
        this.$emit('update:total', this.listTotal)
      }
    },
  },
  data() {
    return {
      isUpLst,
      viewType: 'add',
      popShow: false,
      listTotal: 0,
      formatList: [],

      form: {
        hwzxJxzxCount: '',
        hwzxJxzxChargingStandard: '',
        hwzxJxzxIsUp: '',
        hwzxJxzxSubtotal: 0,
      },

      form2:{
        hwzxRgzxCount: '',
        hwzxRgzxChargingStandard: '',
        hwzxRgzxIsUp: '',
        hwzxRgzxSubtotal: '',
      }
    }
  },
  methods: {
    add() {
      this.viewType = 'add'
      this.popShow = true;
      this.form = {
        hwzxJxzxCount: '',
        hwzxJxzxChargingStandard: '',
        hwzxJxzxIsUp: '',
        hwzxJxzxSubtotal: 0,
      }
    },
    edit(item,index) {
      this.viewType = 'edit'
      this.popShow = true;
      this.form = {...item,index};
    },
    save() {
      if(!(+this.form.hwzxJxzxSubtotal)){
        return toast('小计不能为0！')
      }
      if (this.viewType === 'add') {
        this.formatList.push(this.form)
        this.$emit('collapseInit')
      } else {
        this.formatList[this.form.index] = {...this.form}
        this.formatList = [...this.formatList]
      }
      this.popShow = false
    },
    dcDelete(index) {
      this.formatList.splice(index, 1)
      this.$emit('collapseInit')
    },
    dcCancel() {
      if (!+this.form.hwzxJxzxSubtotal) {
        this.form = {
          hwzxJxzxCount: '',
          hwzxJxzxChargingStandard: '',
          hwzxJxzxIsUp: '',
          hwzxJxzxSubtotal: 0,
        }
      }
    },
    getHuoWuZhuangXieFei() {
      let val = this.form.hwzxJxzxCount;
      if (val) {
        this.form.hwzxJxzxSubtotal = calc(`
				${this.form.hwzxJxzxChargingStandard || 0}
				* (${this.form.hwzxJxzxIsUp === '是' ? 1.2 : 1})
			`)
      } else {
        this.form.hwzxJxzxIsUp = ''
        this.form.hwzxJxzxSubtotal = '';
        this.form.hwzxJxzxChargingStandard = '';
      }

    },
    // 货物装卸费-人工装卸
    getHuoWuZhuangXieFei2() {
      if (this.form2.hwzxRgzxCount) {
        this.form2.hwzxRgzxSubtotal = calc(`
				${this.form2.hwzxRgzxCount || 0}
				* ${this.form2.hwzxRgzxChargingStandard || 0}
				* (${this.form2.hwzxRgzxIsUp === '是' ? 1.2 : 1})
			`)
      } else {
        this.form2.hwzxRgzxChargingStandard = '';
        this.form2.hwzxRgzxIsUp = ''
        this.form2.hwzxRgzxSubtotal = ''
      }
      let total = this.formatList.reduce((prev, cur)=>{
        return  prev += +cur.hwzxJxzxSubtotal
      },0)
      this.listTotal = total + +this.form2.hwzxRgzxSubtotal
      this.$emit('update:total', this.listTotal)
    },
  },
}
</script>
<style scoped lang="scss">
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.label {
  font-weight: 700;
  line-height: 32px;
}
</style>
